<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 大盒子 */
    .box {
      width: 1000px;
      height: 600px;
      border: 1px solid lightgray;
      margin: 100px;
      position: relative;
    }
    /* 左边部分 */
    .left {
      width: 350px;
      height: 350px;
      border: 1px solid rgb(199, 199, 201);
      position: absolute;
      left: 0px;
      top: 0px;
    }
    /* 
      遮罩层
      遮罩层宽高/左边小图宽高 = 右边显示区域宽高/大图片宽高
      遮罩层宽高 = 左边小图宽高 * (右边显示区域宽高/大图片宽高)
    */
    .mask {
      width: 236.25px;
      height: 236.25px;
      background-color: rgba(255, 255, 0, 0.5);
      position: absolute;
      bottom: 0px;
      right: 0px;
    }

    /* 透明层 */
    .glass {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
    }

    /* 右边部分 */
    .right {
      width: 540px;
      height: 540px;
      border: 1px solid rgb(199, 199, 201);
      position: absolute;
      left: 400px;
      top: 0px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <!-- 大盒子 -->
  <div class="box">
    <!-- 左边部分 -->
    <div class="left">
      <img src="images/s-1.png" alt="">
      <div class="mask"></div>
      <div class="glass"></div>
    </div>
    <!-- 右边部分 -->
    <div class="right">
      <img src="images/b-1.png" class="bigImg" alt="">
    </div>
  </div>
  <script>
    // 右边部分
    var rightObj = (function(){
        // 1.获取元素 
        var rightElem = document.querySelector(".right");
        var bigImg = rightElem.querySelector(".bigImg"); 
        // 显示
        function show(){
            rightElem.style.display = "block";
        }
        // 隐藏
        function hide(){
            rightElem.style.display = "none";
        }
        // 移动
        function bigImgRate(xRate,yRate){
            xRate= xRate*100;
            yRate = yRate*100;
            bigImg.style.transform = `translate(-${xRate}%,-${yRate}%)`;
        }
        return {show,hide,bigImgRate};
    }())
    

    // 遮罩层部分
    var leftObj =(function(){
        // 获取元素
        var leftElem = document.querySelector(".left");
        var maskElem = leftElem.querySelector(".mask"); 
        // 显示
        function show(){
            maskElem.style.display = "block";
            }
        // 隐藏
        // 遮罩层移动的最大距离(为减少函数的计算次数因此将一个固定写道全局变量的位置增大作用域)
        var maxleft = leftElem.offsetWidth-maskElem.offsetWidth;
        var maxtop = leftElem.offsetHeight-maskElem.offsetHeight;
        function hide(){
            maskElem.style.display = "none";
            }
        // 遮罩层移动到新位置 （根据鼠标的位置确定遮罩层的位置）
        function setpos(mouseX,mouseY){
            var x = mouseX-maskElem.offsetWidth/2;
            var y = mouseY-maskElem.offsetHeight/2;
        
        //  判断新位置的x、y与遮罩层移动的距离大小
        if(x<0){
            x=0;
        } else if (x>maxleft){
            x=maxleft;
        }
        if(y<0){
            y=0;
        } else if (y>maxtop){
            y=maxtop;
        }
        // 赋值
        maskElem.style.left = x +"px" ;
        maskElem.style.top = y + "px" ;
        } 

        // 获取遮罩层移动的比例
        function getmaskRate(){
            var xRate = maskElem.offsetLeft / leftElem.offsetWidth;
            var yRate = maskElem.offsetTop / leftElem.offsetHeight;
            return {xRate,yRate};
        }
        return {show,hide,setpos,getmaskRate}
    }())
    
    // 透明层部分 
    var glass = document.querySelector(".glass");

    // 鼠标移入
    glass.addEventListener("mouseenter",function(){
        leftObj.show();
        rightObj.show();
    })

    // 鼠标移出
    glass.addEventListener("mouseleave",function(){
        leftObj.hide();
        rightObj.hide();
    })
    // 鼠标移动
    glass.addEventListener("mousemove",function(e){
        leftObj.setpos(e.offsetX,e.offsetY);
        // var posleftRate = 左边遮罩层水平移动的比例
        // var postopRate = 左边遮罩层垂直移动的比例
        // var posRate =(左边遮罩层垂直移动的比例, 左边遮罩层垂直移动的比例)
        var pos = leftObj.getmaskRate();
        rightObj.bigImgRate(pos.xRate,pos.yRate);    
    })

    leftObj.hide();
    rightObj.hide();

  </script>



</body>
</html>